{% extends 'admin/base.html' %}
{% load static %}
{% block title %}合作伙伴{% endblock %}
{% block css %}
<!-- Custom styles for this page -->
<link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet">

<style>
    .uploadImgBtn {
        width: 50px;
        height: 50px;
        cursor: pointer;
        position: relative;
        display: inline-block;
        background: url("/static/img/admin/products/upload/add.png") no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        overflow: hidden;
    }

    .uploadImgBtn .uploadImg {
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .pic {
        width: 100px;
        height: 100px;
    }

    .pic img {
        width: 100%;
        height: 100%;
    }

    .selected-img {
        width: 160px;
        height: 100px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: solid #b1c6c1 1px;
        border-radius: 10px;
        margin-right: 10px;
    }

    .selected-img:hover {
        border: solid #25adc6 2px;
    }

    .file-button {
        width: 160px;
        height: 100px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        border: solid #b1c6c1 1px;
        border-radius: 10px;
        margin-right: 10px;
    }

    .file-button:hover {
        border: solid #25adc6 2px;
    }

    .file-button input {
        position: absolute;
        top: 0;
        height: 100px;
        opacity: 0;
    }

    i:hover {
        color: #0081C6;
    }

    @font-face {
        font-family: 'iconfont';
        /* project id 1361777 */
        src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot');
        src: url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.woff') format('woff'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_1361777_ufufbwqmfpa.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 20px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-delete:before {
        content: "\e63c";
    }
</style>
{% endblock %}
{% block pagecontent %}
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800 mb-2">合作伙伴</h1>

<!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-header" style="text-align: end">
        <button class="btn  btn-dark btn-sm" id="add_partner" data-toggle="modal" data-target="#AddModal"><a
                href="javascript:void(0);" style="color: #ffffff; text-decoration: none">添加</a></button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-sm table-striped" id="PartnerTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        {# <th></th>#}
                        <th style="width: 15%">名称</th>
                        <th style="width: 15%">LOGO</th>
                        <th style="width: 20%">伙伴网址</th>
                        <th style="width: 15%">添加时间</th>
                        <th style="width: 25%">描述</th>
                        <th style="width: 25%">操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="AddModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="AddLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddLabel">添加伙伴</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="input-group col-md-12 row mb-3">
                        <label for="partner_name" class="col-sm-2 col-form-label">名称</label>
                        <input type="text" class="form-control col-sm-10" placeholder="合作伙伴名称" id="partner_name">
                    </div>
                    <div class="input-group col-md-12 row mb-3">
                        <label for="partner_url" class="col-sm-2 col-form-label">首页</label>
                        <input type="text" class="form-control col-sm-10" placeholder="合作伙伴访问路径" id="partner_url">
                    </div>
                    <div class="input-group col-md-12 row mb-3">
                        <label for="partner_description" class="col-sm-2 col-form-label">描述</label>
                        <textarea class="form-control col-sm-10" placeholder="描述..."
                            id="partner_description"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" onclick="submit_partner()">保存</button>
                <button type="button" class="btn btn-sm" style="border:1px solid #a8a6a6;"
                    data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="EditModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="EditLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AddLabel">编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="input-group col-md-12 row mb-3" hidden="hidden">
                        <label for="pk" class="col-sm-2 col-form-label">pk</label>
                        <input type="text" class="form-control col-sm-10" placeholder="pk" id="pk">
                    </div>
                    <div class="input-group col-md-12 row mb-3">
                        <label for="edit_partner_name" class="col-sm-2 col-form-label">名称</label>
                        <input type="text" class="form-control col-sm-10" placeholder="合作伙伴名称" id="edit_partner_name">
                    </div>
                    <div class="input-group col-md-12 row mb-3">
                        <label for="edit_partner_url" class="col-sm-2 col-form-label">图片</label>
                        <input type="text" class="form-control col-sm-10" placeholder="图片下载地址" id="edit_partner_url">
                    </div>
                    <div class="input-group col-md-12 row mb-3">
                        <label for="edit_partner_description" class="col-sm-2 col-form-label">描述</label>
                        <textarea class="form-control col-sm-10" placeholder="描述..."
                            id="edit_partner_description"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm" onclick="sure_edit()">保存</button>
                <button type="button" class="btn btn-sm" style="border:1px solid #a8a6a6;"
                    data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="uploadImage" tabindex="-1" role="dialog" data-backdrop="static"
    aria-labelledby="uploadImageLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadImageLabel">上传图片</h5>
                <span id="product_id_span" style="display: none"></span>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="align-items-center" style="padding: 10px">
                    <div class="uploadImgBtn" id="uploadImgBtn">
                        <input class="uploadImg" type="file" name="file" id="uploadImg"
                            accept="image/jpeg,image/jpg,image/png,image/gif">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="upload_imgs()">上传
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div id="outerdiv"
    style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:10000;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src="" alt="大图" />
    </div>
</div>
{% endblock %}
{% block scripts %}
<!-- Page level plugins -->
<script src="{% static 'vendor/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'vendor/datatables/dataTables.bootstrap4.min.js' %}"></script>


<!-- Page level custom scripts -->
<script src="{% static 'js/admin/partners.js' %}"></script>
<script type="text/javascript">
    $(function () {
        $('#collapsePartners').collapse('show')
    });
    $('a[href="/console/partners"]').addClass('active')
</script>

{% endblock %}